<template>
  <div class="page-head">
    <n-breadcrumb class="breadcrumb">
      <n-breadcrumb-item>仪表盘</n-breadcrumb-item>
    </n-breadcrumb>
  </div>
  <div class="db-container">
    <div class="above-container">
      <n-card class="sc-item">
        <n-statistic label="用户数" :value="totalData.totalUser">
          <template #suffix>
            <n-icon size="24" :component="TeamOutlined" />
          </template>
        </n-statistic>
      </n-card>
      <n-card class="sc-item">
        <n-statistic label="记账数" :value="totalData.totalStatementDetail">
          <template #suffix>
            <n-icon size="24" :component="BarChartOutlined" />
          </template>
        </n-statistic>
      </n-card>
      <n-card class="sc-item">
        <n-statistic label="记账额(元)" :precision="2" :value="totalData.totalStatementDetailAmount">
          <template #suffix>
            <n-icon size="24" :component="DollarOutlined" />
          </template>
        </n-statistic>
      </n-card>
      <n-card class="sc-item">
        <!-- <n-statistic label="商品数" :value="0">
          <template #suffix>
            <n-icon size="24" :component="TagsOutlined" />
          </template>
        </n-statistic> -->
        <div>欢迎回来!</div>
      </n-card>
    </div>
    <div class="mt20 below-container">
      <div class="left">
        <n-card class="sc-charts">
          <base-chart :options="demoOptions" height="65vh" />
        </n-card>
      </div>
      <div class="right">
        <n-card class="sc-item">
          <div>占个位</div>
        </n-card>
        <n-card class="sc-item">
          <div>广告位!!!</div>
        </n-card>
        <n-card class="sc-item">
          <div>不知道放啥，先占个位</div>
        </n-card>
      </div>
    </div>
  </div>
</template>

<script async setup lang="ts">
import BaseChart from "../../components/base-chart.vue"
import { TeamOutlined , TagsOutlined , BarChartOutlined , DollarOutlined} from '@vicons/antd'

import { getTotalData,getEchartsData } from '../../config/api';
import { getRawOptions,mockData } from  '../../config/echarts';
import {ref} from "vue";

const totalData = ref({
  totalUser:0,
  totalStatementDetail:0,
  totalStatementDetailAmount:0,
});

// getTotalData().then(data => {
//   totalData.value = data;
// })

const demoOptions = ref({});
let showDays = 45;

// getEchartsData().then( ({xData,tradeNumData,tradeAmountData}) => {
//   demoOptions.value = getRawOptions(showDays,xData,tradeNumData,tradeAmountData);
// });

//下面是调用演示数据
let {xData,tradeNumData,tradeAmountData} = mockData(showDays);
demoOptions.value = getRawOptions(showDays,xData,tradeNumData,tradeAmountData);

</script>

<style lang="less" scoped>

.above-container {
  display: flex;
  /* 默认是水平的 */
  flex-direction: row;
  /*设置子元素的排列方向*/
  justify-content: space-between;

  .sc-item {
    width: 250px;
    min-height: 150px;
    border-radius: 20px;
  }
}

.below-container {
  display: flex;

  .left {
    flex: 3;
    padding-right: 25px;

    .sc-charts {
      border-radius: 20px;
      height: 65vh;
    }
  }

  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
  }

  .sc-item {
    width: 250px;
    min-height: 160px;
    border-radius: 20px;
  }
}

</style>
